<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="wapper">
		
	</div>
	

	<script>
		const createDOMFromString = (domString) => {
			const el = document.createElement('div')
			el.innerHTML = domString
			return el
		}
		class LikeButton{
			constructor(){
				this.state={isLiked:false}
			}
			changeText(){
				const likeText=this.el.querySelector('.like-text');
				this.state.isLiked=!this.state.isLiked;
				likeText.innerHTML=this.state.isLiked?"取消":"点赞";
			}
			render(){
				this.el=createDOMFromString(`
					<button class="like-btn">
					<span class="like-text">点赞</span>
					<span>♠</span>
					</button>
					`)
				this.el.addEventListener('click',this.changeText.bind(this),false);
				return this.el;
			}
		}
		const wapper=document.querySelector('.wapper');
		const likeButton1=new LikeButton();
		wapper.appendChild(likeButton1.render());
		const likeButton2=new LikeButton();
		wapper.appendChild(likeButton2.render());
	</script>
</body>
</html>